﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传示例</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 引入Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qs@6.10.3/dist/qs.min.js"></script>

    <style scoped>
        .position-register {
            padding: 20px;
            background-color: #fff;
        }

        .breadcrumb {
            margin-bottom: 15px;
            font-size: 14px;
            color: #666;
        }

        .action-buttons {
            margin-bottom: 20px;
            text-align: right;
        }

        .register-form {
            max-width: 1200px;
            margin: 0 auto;
        }

        .textarea-input {
            width: 100%;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .el-row {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 添加根元素，Vue将挂载到这里 -->
    <div id="app">
        <div class="position-register">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <span>您正在做的业务是：</span>
                <span>人力资源 > 招聘管理 > 职位发布管理 > 职位发布登记</span>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" v-on:click="handleSubmit">提交</el-button>
                <el-button v-on:click="handleReset">清除</el-button>
            </div>

            <!-- 表单区域 -->
            <el-form :model="formData"
                     ref="formRef"
                     label-width="80px"
                     class="register-form"
                     :rules="rules">
                <el-row :gutter="20">
                    <!-- 第一行表单 -->
                    <el-col :span="6">
                        <el-form-item label="I级机构" prop="first_kind_name">
                            <el-select v-model="formData.first_kind_name"
                                       placeholder="--请选择--"
                                       v-on:change="handleFirstKindChange">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option v-for="item in firstKindOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="II级机构" prop="second_kind_name">
                            <el-select v-model="formData.second_kind_name"
                                       placeholder="--请选择--"
                                       
                                       v-on:change="handleSecondKindChange">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option v-for="item in secondKindOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="III级机构" prop="thirdKindId">
                            <el-select v-model="formData.third_kind_name"
                                       placeholder="--请选择--"
                                       v-on:change="handleSecondKindxc">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option v-for="item in thirdKindOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="招聘类型" prop="engage_type">
                            <el-select v-model="formData.engage_type"
                                       placeholder="--请选择--">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="校园招聘" label="校园招聘"></el-option>
                                <el-option value="社会招聘" label="社会招聘"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第二行表单 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="职位分类" prop="major_kind_name">
                            <el-select v-model="formData.major_kind_name"
                                       placeholder="--请选择--"
                                       v-on:change="handleMajorKindChange">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option v-for="item in majorKindOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="职位名称" prop="major_name">
                            <el-select v-model="formData.major_name"
                                       placeholder="--请选择--"
                                       
                                       v-on:change="handleMajorIdChange">
                                <!-- 新增事件 -->
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option v-for="item in majorOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="招聘人数" prop="human_amount">
                            <el-input v-model.number="formData.human_amount"
                                      placeholder="请填写招聘人数"
                                      ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="截止日期" prop="deadline">
                            <el-date-picker v-model="formData.deadline"
                                            type="date"
                                            placeholder="请选择截止日期"
                            @* format="yyyy-MM-dd" *@
                            @* value-format="yyyy-MM-dd" *@
                                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第三行表单 -->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="登记人">
                            <el-input v-model="formData.register"
                                      placeholder="登记人"
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="登记时间">
                            <el-input v-model="formData.regist_time"
                                      placeholder="登记时间"
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 职位描述和招聘要求 -->
                <el-form-item label="职位描述" prop="major_describe">
                    <el-input type="textarea"
                              v-model="formData.major_describe"
                              :rows="4"
                              placeholder="请输入职位描述"
                              class="textarea-input"></el-input>
                </el-form-item>

                <el-form-item label="招聘要求" prop="engage_required">
                    <el-input type="textarea"
                              v-model="formData.engage_required"
                              :rows="4"
                              placeholder="请输入招聘要求"
                              class="textarea-input"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <script type="text/javascript">
        // 从Vue导入所有必要的API，添加了watch
        const { createApp, ref, reactive, computed, onMounted, watch } = Vue;
        // 从Element Plus导入Message组件
        const { ElMessage } = ElementPlus;

        const app = createApp({
            setup() {
                // 表单引用
                const formRef = ref(null);

                // 表单数据
       
                const formData = reactive({
                    mre_id:'',
                    firstKindId: '',// I级机构
                    first_kind_name: '',
                    secondKindId: '',// II级机构
                    second_kind_name:'',
                    thirdKindId: '',       // III级机构
                    third_kind_name:'',
                    major_kind_name:'',
                    engage_type: '',        // 招聘类型
                    majorKindId: '',       // 职位分类
                    majorId: '',           // 职位名称
                    major_name: '',         // 新增：职位名称（名称，对应majorOptions的label）
                    human_amount: null,     // 招聘人数
                    deadline: null,       // 截止日期
                    register: 'zhangsan',     // 登记人
                    regist_time: '',        // 登记时间
                    major_describe: '',     // 职位描述
                    engage_required: '' ,    // 招聘要求
                    name:''
                });

                // 表单验证规则
                const rules = reactive({
                    firstKindId: [
                        { required: true, message: '请选择I级机构', trigger: 'change' }
                    ],
                    engageType: [
                        { required: true, message: '请选择招聘类型', trigger: 'change' }
                    ],
                    majorKindId: [
                        { required: true, message: '请选择职位分类', trigger: 'change' }
                    ],
                    majorId: [
                        { required: true, message: '请选择职位名称', trigger: 'change' }
                    ],
                    humanAmount: [
                        { required: true, message: '请填写招聘人数', trigger: 'blur' },
                        { type: 'number', message: '招聘人数必须为数字', trigger: 'blur' }
                    ],
                    dateStart: [
                        { required: true, message: '请选择截止日期', trigger: 'change' }
                    ]
                });
                  
                // 级联选择数据
                const firstKindOptions = ref([
                    { value: '01', label: '集团' },
                    { value: '02', label: '总部' }
                ]);

                const secondKindOptions = ref([]);
                const thirdKindOptions = ref([]);

                // 职位分类数据
                const majorKindOptions = ref([
                    { value: '01', label: '销售' },
                    { value: '02', label: '软件开发' },
                    { value: '03', label: '人力资源' }
                ]);

                const majorOptions = ref([]);

                // 当前时间
                const currentTime = computed(() => {
                    const now = new Date();
                    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
                });

                // 计时器更新时间
                const tick = () => {
                    formData.registTime = currentTime.value;
                    setTimeout(tick, 1000);
                };
                
                const handleSecondKindxc = (value) => {
                    formData.secondKindId = '';
                    formData.thirdKindId = '';
                          const selectedFirstKind = firstKindOptions.value.find(item => item.value === value);
        formData.third_kind_name = selectedFirstKind ? selectedFirstKind.label : '';
                          // 这里模拟从API获取II级机构数据
                    secondKindOptions.value = value === '01' ? [
                        { value: '011', label: '前端开发A' },
                        { value: '012', label: '后端开发B' }
                    ] : value === '02' ? [
                        { value: '021', label: '1A' },
                        { value: '022', label: '1B' }
                    ] : [];
                };
                // 级联选择变化处理
                const handleFirstKindChange = (value) => {
                    formData.secondKindId = '';
                    formData.thirdKindId = '';
                          const selectedFirstKind = firstKindOptions.value.find(item => item.value === value);
        formData.first_kind_name = selectedFirstKind ? selectedFirstKind.label : '';
                          // 这里模拟从API获取II级机构数据
                    secondKindOptions.value = value === '01' ? [
                        { value: '011', label: '集团子公司A' },
                        { value: '012', label: '集团子公司B' }
                    ] : value === '02' ? [
                        { value: '021', label: '总部部门A' },
                        { value: '022', label: '总部部门B' }
                    ] : [];
                };
                
            const handleSecondKindChange = (value) => {
          const selectedItem = secondKindOptions.value.find(item => item.value === value);
          formData.second_kind_name = selectedItem ? selectedItem.label : '';
        };
                        const handleMajorKindChange = (value) => {
          // 先清空旧数据
          formData.majorId = '';
          formData.major_name = ''; // 此处清空旧数据是合理的，但需在新数据获取后重新赋值

          // 模拟从API获取职位名称数据（确保majorOptions先填充数据）
          majorOptions.value = value === '01' ? [
            { value: '11', label: '区域经理' },
            { value: '12', label: '销售专员' }
          ] : value === '02' ? [
            { value: '21', label: '前端开发' },
            { value: '22', label: '后端开发' }
          ] : [];

          // **在majorOptions填充后**，再根据value查找对应的label
          const selectedItem = majorOptions.value.find(item => item.value === value);
          formData.major_name = selectedItem ? selectedItem.label : '';
        };
         const initFormData = () => {
            // 从URL查询参数中获取编码数据
            const encodedData = new URLSearchParams(window.location.search).get('data');
            if (encodedData) {
                try {
                    // 解码并解析JSON数据
                    const data = JSON.parse(decodeURIComponent(encodedData));
                    // 将数据填充到表单
                    Object.assign(formData, data);
                } catch (error) {
                    console.error('解析数据失败:', error);
                }
            }
        };

        // 监听URL变化并初始化表单
        watch(() => window.location.search, initFormData, { immediate: true });

                // 提交表单
            const handleSubmit = () => {
            // 表单验证
            formRef.value.validate((valid) => {
                if (valid) {
                    console.log("表单数据:", formData);

                    const requestData = {
                        mre_id: formData.mre_id, // 从表单数据中获取mre_id
                        first_kind_id: parseInt(formData.firstKindId) || 0,
                        first_kind_name: formData.first_kind_name,
                        second_kind_id: parseInt(formData.secondKindId) || 0,
                        second_kind_name: formData.second_kind_name,
                        third_kind_id: parseInt(formData.thirdKindId) || 0,
                        third_kind_name: formData.third_kind_name,
                        major_kind_id: parseInt(formData.majorKindId) || 0,
                        major_kind_name: "",
                        major_id: parseInt(formData.majorId) || 0,
                        major_name: formData.major_name,
                        human_amount: formData.human_amount || 0,
                        engage_type: formData.engage_type,
                        deadline: formData.deadline,
                        register: formData.register,
                        changer: "zhangsan",
                        regist_time: new Date().toISOString().split('T')[0],
                        change_time: new Date().toISOString().split('T')[0],
                        major_describe: formData.major_describe,
                        engage_required: formData.engage_required,
                        name: formData.name
                    };

                    console.log("请求数据:", requestData);

                    axios.post(
                        "/Text/releaseUpdate",
                        requestData, {
                            headers: { "Content-Type": "application/json" }
                        })
                        .then((response) => {
                            console.log("响应数据:", response.data);
                            ElMessage.success("提交成功");
                              window.location.href = "@Url.Action("Update", "Text")";
                            // handleReset();
                        })
                        .catch((error) => {
                            console.error("错误:", error.response || error);
                            ElMessage.error("提交失败：" + (error.response?.data?.message || error.message));
                        });
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        };
               
                // 重置表单
                const handleReset = () => {
                    formRef.value.resetFields();
                };

                // 初始化时间
                onMounted(() => {
                    tick();
                });

                // 返回所有需要暴露给模板的属性和方法
                return {
                    formRef,
                    formData,
                    handleSecondKindChange,
                    rules,
                    firstKindOptions,
                    secondKindOptions,
                    thirdKindOptions,
                    majorKindOptions,
                    majorOptions,
                    handleSubmit,
                    handleReset,
                    handleFirstKindChange,
                    handleMajorKindChange,


                };
            }
        });

        app.use(ElementPlus);
        // 确保挂载到正确的DOM元素
        app.mount('#app');
    </script>
</body>
</html>